<template>
  <div>
    <div class="taskIntro">
      <div class="sp1"><span>任务名称：</span><span>中英文翻译文章</span></div>
      <div class="sp1"><span>任务简述：</span><span>要求英语专八成绩70分以上，有充足的 业余时间。<br> 1.中英文材料笔译。 <br>2.有笔译经验优先考虑。 <br>3.具有较强的翻译业务能力。</span></div>
      <div class="sp1"><span>任务价值：</span><span>400元</span></div>
      <div class="sp1">
        <span>难易程度：</span>
        <span>
          <div class="img" >
                <img src="../../../assets/images/ic_stars.png" alt="" v-for="i in num">
                <img src="../../../assets/images/ic_stars2.png" alt="" v-for="i in (5-num)">
              </div>
        </span>
      </div>
      <div class="sp1"><span>剩余名额：</span><span>9</span></div>
      <div class="sp1"><span>任务截止时间：</span><span>2019-09-01 18:00:00</span></div>
      <div class="sp1"><span>兑换后有效期：</span><span>30天</span></div>
    </div>
    <div class="line"></div>
    <div class="div1">
      <div class="top">
        <div class="tip"></div>
        <span>任务简介</span>
      </div>
      <img src="../../../assets/images/two.png" alt="">
    </div>
    <div class="div1">
      <div class="top">
        <div class="tip"></div>
        <span>实物奖励介绍</span>
      </div>
      <img src="../../../assets/images/two.png" alt="">
    </div>
    <div style="height: 1rem;width: 100%"></div>
    <div class="btn">
      <input type="button" value="50工分 | 立即兑换">
    </div>
  </div>
</template>

<script>
    /**
     *  任务简介
     * @Author zzl
     * @Date 2019/5/15 13:50.
     */

    export default {
        mounted() {

        },
        components: {},
        props: {},
        data() {
            return {
              num:3
            }
        },
        computed: {},
        methods: {},
        watch: {},
        filters: {},
        beforeDestroy() {

        }
    }
</script>

<style lang="less" scoped>
   .taskIntro{
     width: 100%;
     height: 100%;
     padding: 0.33rem;
     display: flex;
     flex-direction: column;
     justify-content: left;
     box-sizing: border-box;
     .sp1{
       display: flex;
       flex-direction: row;
       margin: 0.09rem 0;
       .img{
         display: flex;
         flex-direction: row;
         justify-content: left;
         img{
           width: 0.39rem;
           height: 0.38rem;
           margin-right: 0.16rem;
         }
       }
       span {
         display: block;
       }
       span:first-child{
         color: #D2D2D2;
         font-size: 0.3rem;
       }
       span:last-child{
         width: 5.14rem;
         text-align: left;
         line-height: 0.4rem;
         color: #333333;
       }
     }
     .sp1:nth-child(6){
       span:last-child{
         width: 4.6rem;
       }
     }
     .sp1:last-child{
       span:last-child{
         width: 4.6rem;
       }
     }
   }
   .line{
     width: 100%;
     height:0.12rem;
     background: #FAFAFA;
   }
  .div1{
    padding:0 0.32rem;
    box-sizing: border-box;
    .top{
      display: flex;
      flex-direction: row;
      align-items: center;
      margin: 0.2rem 0;
      .tip{
        width:0.08rem;
        height:0.33rem;
        margin-right: 0.15rem;
        background:linear-gradient(45deg,rgba(253,180,5,1),rgba(253,204,74,1));
      }
      span{
        font-size: 0.32rem;
        font-family:PingFangSC-Medium;
        font-weight:bold;
        color:rgba(51,51,51,1);
        line-height:0.48rem;
      }
    }
    img{
      width: 100%;
      height: auto;
    }
  }
  .btn{
    position: fixed;
    width:100%;
    height: 1rem;
    bottom: 0rem;
    background: white;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    input[type='button']{
      width:6.96rem;
      height:.80rem;
      display: block;
      background:linear-gradient(45deg,rgba(253,180,5,1),rgba(253,204,74,1));
      border-radius:.40rem;
      border: 0;
    }
  }
</style>
